<template>
  <div class="basic-container">
    <div class="basic-container-inner">
      <div class="detail-title">
        <div class="title-base">收入</div>
      </div>
      <div class="income-box">
        <div class="top-box">
          <div class="income-detail">
            <div class="money-box">
              <p class="title">总收入</p>
              <CountTo prefix="¥" :startVal="0" :endVal="200" :duration="1500" />
            </div>
            <div class="icon-box">
              <span class="icon iconfont icon-zongshouru"></span>
            </div>
          </div>
          <div class="income-detail">
            <div class="money-box">
              <p class="title">点评训练总收入</p>
              <CountTo prefix="¥" :startVal="0" :endVal="200" :duration="1500" />
            </div>
            <div class="icon-box icon-box2">
              <span class="icon iconfont icon-dianpingshouru"></span>
            </div>
          </div>
          <div class="income-detail">
            <div class="money-box">
              <p class="title">考核总收入</p>
              <CountTo prefix="¥" :startVal="0" :endVal="200" :duration="1500" />
            </div>
            <div class="icon-box icon-box3">
              <span class="icon iconfont icon-kaopingshouru1"></span>
            </div>
          </div>
        </div>
        <div class="bottom-box">
          <div class="filter-box">
            <div class="title">月收入详情</div>
            <div>filter</div>
          </div>
          <div class="table-box">
            <div class="table-top">
              <div class="table-top-detail">
                <div class="table-title">当月总收入</div>
                <CountTo prefix="¥" :startVal="0" :endVal="200" :duration="1500" />
              </div>
              <div class="table-top-detail">
                <div class="table-title">当月点评训练总收入</div>
                <CountTo prefix="¥" :startVal="0" :endVal="200" :duration="1500" />
              </div>
              <div class="table-top-detail">
                <div class="table-title">当月考核总收入</div>
                <CountTo prefix="¥" :startVal="0" :endVal="200" :duration="1500" />
              </div>
            </div>
            <div class="table-bottom">
              <ag-grid-vue
                style="width: 100%; height: 600px"
                class="ag-theme-quartz ag-root-wrapper-dark"
                :localeText="localeText"
                :columnDefs="columnDefs"
                @grid-ready="onGridReady"
                :defaultColDef="defaultColDef"
                :rowData="rowData"
              >
              </ag-grid-vue>
              <div class="content-page">
                <div class="page-choose"></div>
                <div class="page-inner">
                  <div class="page-count">
                    总共 {{ page.total }} 条
                  </div>
                  <a-pagination
                    v-model:current="page.current"
                    v-model:pageSize="page.pageSize"
                    show-size-changer
                    :total="page.total"
                    @showSizeChange="onShowSizeChange"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, shallowRef,reactive } from 'vue';
  import { CountTo } from '@/components/CountTo/index';
  import { AG_GRID_LOCALE_ZZZ } from '@/utils/locale.js';
  export default defineComponent({
    components: {
      CountTo
    },
    mounted() {
        console.log(2222)
    },
    setup(props) {
      const columnDefs = ref([{ field: 'athlete', filter: 'agMultiColumnFilter' }]);
      const gridApi = shallowRef();
      const defaultColDef = ref({
        flex: 1,
        minWidth: 200,
      });
      const localeText = ref(AG_GRID_LOCALE_ZZZ);
      // const sideBar = ref(null);
      const rowData = ref(null);

      // onBeforeMount(() => {
      //   sideBar.value = { toolPanels: ["filters"] };
      // });
      const page = reactive({
        current: 1,
        pageSize: 10,
        total: 399,
      });
      const onGridReady = (params) => {
        gridApi.value = params.api;

        const updateData = (data) => (rowData.value = data);

        fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
          .then((resp) => resp.json())
          .then((data) => updateData(data));
      };
      const onShowSizeChange = () => {
        console.log('测试分页')
      }
      return {
        columnDefs,
        page,
        gridApi,
        defaultColDef,
        localeText,
        // sideBar,
        rowData,
        onGridReady,
        onShowSizeChange,
      };
    },
  });
 
</script>
<style lang="less" scoped>
  .basic-container{
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    background: var(--osce-background-grey);

    .basic-container-inner{
      display: flex;
      flex: 1;
      flex-direction: column;
      overflow: auto;

      .detail-title{
        display: flex;
        box-sizing: content-box;
        align-items: center;
        justify-content: flex-start;
        width: 1152px;
        height: 34px;
        margin: 0 auto;
        padding: 24px 0 20px;

        .title-base{
          font-size: 24px;
          font-weight: 600;
        }
      }

      .income-box{
        width: 1152px;
        margin: 0 auto;
        overflow: auto;
        // background: pink;
        .top-box{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          height: 111px;

          .income-detail{
            display: flex;
            justify-content: space-between;
            width: 374px;
            height: 111px;
            padding: 20px;
            border-radius: 12px;
            background: var(--osce--background-color);

            .money-box{
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              font-size: 32px;
              font-weight: 600;

              .title{
                margin: 0;
              color: var(--osce--gray-color);
                font-size: 16px;
                font-weight: 400;
              }
            }

            .icon-box{
              display: flex;
              align-items: center;
              justify-content: center;
              width: 62px;
              height: 62px;
              border-radius: 16px;
              background: #FFF4E8;

              .iconfont{
                color: #FD8B08;
                font-size: 36px;
              }
            }

            .icon-box2{
              background: #EBFFEC;

              .iconfont{
                color: #00CC0E;
              }
            }

            .icon-box3{
              background: #E3F8FA;

              .iconfont{
                color: #0BC;
              }
            }
          }
        }

        .bottom-box{
          width: 100%;
          margin-top: 20px;
          background: var(--osce--background-color);

          .filter-box{
            display: flex;
            box-sizing: content-box;
            align-items: center;
            justify-content: space-between;
            height: 30px;
            padding: 16px 20px;
            border-bottom: 1px solid var(--osce--border-color);

            .title{
              font-size: 16px;
              font-weight: 600;
              
            }
          }

          .table-box{
            padding: 20px 0;

            .table-top{
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              padding: 0 24px 20px;
              border-bottom: 1px solid var(--osce--border-color);


              .table-top-detail{
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 359px;
                height: 74px;
                padding: 20px;
                border-radius: 12px;
                background: var(--osce--border-color);
                font-size: 24px;
                font-weight: 600;

                .table-title{
                  font-size: 15px;
                  font-weight: 400;
                }
              }
            }

            .table-bottom{
              min-height: 100px;
              max-height: 800px;
              padding: 20px;

              .content-page{
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                height: 40px;
                padding: 0 10px;

                .page-inner{
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;

                  .page-count{
                    padding:0 20px;
                    font-size: 13px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
